<template>
    <div>
        <Nav :is-show="true"></Nav>
        <Swiper class="banner common" :pic-list="banner"></Swiper>


        <!-- <Login v-if="$store.state.isLoginModel" class="index-login"></Login> -->
        <div class="index-footer">

            <div class="index-head common">
                <!-- 精品推荐 -->
                <Plug :title="title[0]"></Plug>

                <div class="shopgoods">
                    <ShopGoods v-for="items in data.slice(0, 4)" :key="items.id" :name="items.name" :id="items.id"
                        :coverImg="items.coverImg" :coin="items.coin"></ShopGoods>
                </div>



                <!-- 鸡腿交换 -->
                <div class="index-exchange">
                    <Plug :title="title[1]"></Plug>

                    <img src="../assets/img/ad.4c6b6225.png" alt="" style="margin-bottom:20px">

                    <div class="shopgoods">
                        <ShopGoods v-for="items in data.slice(4, 12)" :key="items.id" :name="items.name" :id="items.id"
                            :coverImg="items.coverImg" :coin="items.coin"></ShopGoods>
                    </div>
                </div>

            </div>

            <!-- 鸡腿攻略 -->
            <div class="strategy">
                <Plug :title="title[2]" class=" common"></Plug>

            </div>
        </div>
    </div>

</template>

<script>
import Axios from 'axios'
import Nav from '@/components/Nav'
import Plug from '@/components/Plug'
import ShopGoods from '@/components/ShopGoods'
import Swiper from '@/components/Swiper'
import Bus from '../evenBus'
import { getData, getRecommendFun, getHotFun } from '@/request/api.js'

// console.log(Bus.num);
export default {
    data() {
        return {
            data: [],
            title: ['精品推荐', '鸡腿交换', '鸡腿攻略'],
            pic: ['@/assets/img/jingpin.png', '@/assets/img/hot.png', '@/assets/img/score.png'],
            banner: [],
            recommend: [],
            hot: [],

        }
    },
    components: {
        Nav,
        ShopGoods,
        Plug,
        Swiper,
        // Login,

    },
    methods: {
        async initListAll(id) {
            const { data: res } = await getData(id)
            // console.log(res.data);
            this.data = res.data
        },

        async getRequest() {
            // 轮播图
            Axios.get("http://kumanxuan1.f3322.net:8001/index/index").then((res) => {
                // console.log(res.data.data.banner);
                this.banner = res.data.data.banner;

            });
            //精品
            let recommendData = await getRecommendFun()
            // console.log(recommendData);
            this.recommend = recommendData.data;
            // console.log(recommendData.data);

            //热门
            let hotData = await getHotFun();
            this.hot = hotData.data;
            // console.log(hotData.data);
        },


        // watch: {
        //     data(val) {
        //         // 不会用vuex，用本地存储代替，主页点击之后跳转detail显示对应内容
        //         val.some(e => {
        //             console.log(e);
        //             if (e.id == 139)
        //                 window.sessionStorage.setItem('id', e.id)

        //         })
        //     }

        // },
    },

    created() {
        this.initListAll('')
        this.getRequest()
    }
}
</script>

<style lang="less" scoped>
.banner {
    width: 100%;
    padding-bottom: 30px;
    padding-top: 20px;
    // filter: blur(5px);

}



.index-footer {
    width: 100%;
    background-color: #f5f5f5;
    padding-top: 50px;

    .index-head {

        .shopgoods {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

    }

    .strategy {
        padding-top: 30px;
        width: 100%;
        height: 300px;
        background-color: #ffffff;
    }
}
</style>